<template>
  <wd-notice-bar text="模拟数据有限，单列情况下可测试下拉加载情况" prefix="sound" :scrollable="false" type="warning" custom-class="space" />
  <wd-radio-group v-model="columnCount" inline shape="dot" custom-class="m-5" @change="getRefreshList">
    <wd-radio :value="1">单列</wd-radio>
    <wd-radio :value="2">双列</wd-radio>
    <wd-radio :value="3">三列</wd-radio>
  </wd-radio-group>
  <view v-if="list.length" class="waterfall">
    <view class="title">为您推荐</view>
    <view class="waterfall-page">
      <view class="waterfall-page-column" v-for="(item, index) in columnList" :key="index" ref="column">
        <view class="waterfall-page-item" v-for="(pItem, pIndex) in item" :key="pIndex">
          <image class="waterfall-page-img" :src="pItem.logo" mode="widthFix"></image>
          <view class="waterfall-page-title">{{ pItem.goodsName }}</view>
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
    <!-- 没有更多了 -->
    <view class="loading" v-if="list.length >= 10">
      <text>没有更多了</text>
    </view>
  </view>
</template>

<script>

// 模拟数据（使用Unsplash开源免费图片）
const mockData = [
  { logo: '/static/sync_bg.jpg', goodsName: '模拟商品1' },
  { logo: '/static/avatar.jpg', goodsName: '模拟商品2' },
  { logo: '/static/sync_bg.jpg', goodsName: '模拟商品3' },
  { logo: '/static/avatar.jpg', goodsName: '模拟商品4' },
];

export default {
  data() {
    return {
      columnCount: 2,
      list: [], // 图片列表
      pageNum: 1, // 页码
      loading: false,
      columnList: [], // 每列图片
      columnHeight: [], // 每列图片高度
    }
  },
  onShareAppMessage(res) {
    return {
      title: '自定义多列瀑布流',
      path: '/pagesA/waterfall/index'
    }
  },
  onReachBottom() {
    console.log('打印***111', 111)
    if (this.list.length > 10) return
    this.getProductRecommend()
  },
  methods: {
    getRefreshList() {
      this.initData()
      this.getProductRecommend()
    },
    /** 推荐商品*/
    getProductRecommend() {
      this.loading = true;
      // 使用模拟数据
      this.list = this.list.concat(mockData);
      this.setWaterfallLayout();
    },
    /** 初始化数据 */
    initData() {
      this.list = []
      this.columnList = []
      this.columnHeight = []
      for (let i = 0; i < this.columnCount; i++) {
        this.columnList.push([]);
        this.columnHeight.push(0);
      }
    },
    /** 设置瀑布流布局 */
    async setWaterfallLayout() {
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i];
        try {
          // 获取图片信息
          const imgInfo = await uni.getImageInfo({ src: item.logo });
          console.log('打印***imgInfo', imgInfo)
          this.loading = false;
          // 计算等比例缩放后的高度
          const containerWidth = 375 / this.columnCount - 30 // 假设屏幕宽度375，2列，左右padding 15px
          const scale = containerWidth / imgInfo.width
          const h = Math.floor(imgInfo.height * scale) // 按比例计算实际显示高度

          console.log(
            '图片高度：',
            imgInfo[1],
            this.columnList,
            this.columnHeight
          );
          if (this.columnCount === 1) {
            // 单列处理
            this.columnList[0].push(item);
            this.columnHeight[0] += h;
          } else {
            // 多列处理：找出高度最小的列
            let minHeightIndex = 0;
            for (let j = 1; j < this.columnCount; j++) {
              if (this.columnHeight[j] < this.columnHeight[minHeightIndex]) {
                minHeightIndex = j;
              }
            }
            // 将图片添加到高度最小的列
            this.columnList[minHeightIndex].push(item);
            this.columnHeight[minHeightIndex] += h;
          }
        } catch (error) {
          console.error('获取图片信息失败：', error);
        }
      }
      this.$emit('complete');
    }
  },
  mounted() {
    this.initData();
    this.getProductRecommend();
  }
}
</script>

<style lang="scss" scoped>
.waterfall {
  padding: 0 15px;

  .title {
    font-size: 18px;
    color: #333333;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .waterfall-page {
    display: flex;
    align-items: flex-start;

    .waterfall-page-column {
      box-sizing: border-box;
      flex: 1;
      padding: 0 15rpx;
      width: 0;

      .waterfall-page-item {
        margin-bottom: 20px;

        .waterfall-page-img {
          display: inline-block;
          width: 100%;
        }

        .waterfall-page-title {
          margin-top: 10px;
          font-size: 14px;
          color: #111111;
          letter-spacing: 0;
          text-align: justify;
          font-weight: 500;

        }
      }
    }
  }

  .loading {
    text-align: center;
    padding: 10px 0 30px;
    color: #999;
    font-size: 24rpx;
  }

}
</style>
